import React, { useState } from "react";
import { Button, Space, Stepper } from "react-vant";
import style from "./style.module.css";

interface addCarPorps {
  color?: string, 
  size?: string, 
  count?: number,
  price?: number,
  url?: string,
  title?: string,
  id?: string
}

interface SkuState {
  url: string;
  price: number;
  maxCount: number;
  desc: string;
  colors: string[];
  sizes: string[];
  addCar?: (addCarPorps) => void;
  id: string
  show: boolean
  title: string
}
export const Sku: React.FC<SkuState> = ({
  url,
  price,
  maxCount,
  desc,
  colors,
  sizes,
  addCar,
  show,
  id,
  title
}) => {
  const [color, setColor] = useState("红色");
  const [size, setSize] = useState("150");
  const [count, setCount] = useState(1);

  return (
    <div className={style["sku"]} style={{ display: show ? 'block': 'none' }}>
      <div className={style["content"]}>
        <div className={style["shop"]}>
          <div>
            <img src={url} alt="" />
          </div>
          <div>
            <h3>{price}</h3>
            <p>库存: {maxCount}</p>
            <p>{desc}</p>
          </div>
        </div>
        <div>
          <div>
            <h4>颜色</h4>
            <div>
              <Space>
                {colors.map((v, i) => {
                  return (
                    <Button
                      size="small"
                      key={i}
                      type={color === v ? "primary" : "default"}
                      onClick={() => setColor(v)}
                    >
                      {v}
                    </Button>
                  );
                })}
              </Space>
            </div>
          </div>
          <div>
            <h4>尺寸</h4>
            <div>
              <Space>
                {sizes.map((v, i) => {
                  return (
                    <Button
                      size="small"
                      key={i}
                      type={size === v ? "primary" : "default"}
                      onClick={() => setSize(v)}
                    >
                      {v}
                    </Button>
                  );
                })}
              </Space>
            </div>
          </div>
          <div>
            <h4>数量</h4>
            <div>
              <Stepper
                max={maxCount}
                value={count}
                onChange={(value) => setCount(value)}
              ></Stepper>
            </div>
          </div>
        </div>
        <Button
          type="danger"
          round
          block
          onClick={() => addCar && addCar({ color, size, count, title, price, url, id })}
        >
          加入购物租车
        </Button>
      </div>
    </div>
  );
};
